import { history } from 'umi';
import { Layout,Menu} from 'antd';
import React, { useState,FC,useEffect} from 'react';
// 引入约定式路由
import {getRoutes} from "../../.umi/core/routes"
import type { MenuProps } from 'antd';
import "./index.css"
import { createFromIconfontCN } from '@ant-design/icons';
// 自定义 font 图标
const MyIcon = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_3605787_y8iuccq5oc.js', // 在 iconfont.cn 上生成
});
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
      type,
    } as MenuItem;
  }
  const { Sider } = Layout;
  // 声明类型
type Iprops={
  collapsed:boolean
}

const SiderBase:FC<Iprops>= (props:any) => {
   // 解构props
   let {collapsed} = props;
    // 一个用于存储展开菜单key的数组状态
    let [openKey,setOpenKey] = useState<string[]>([])
    // 缓存收起之前的菜单展开状态
    let [cacheOpenKey,setCacheOpenKey]=useState<string[]>([])
     // 菜单展开的时候触发的事件
  let handleOpenChange=(item:string[])=>{
    // console.log(item);
    setOpenKey(item)
  }
  // 菜单是否折叠
  useEffect(()=>{
    if(collapsed){
      // 菜单折叠起来了
      // 收起所以子菜单
      setCacheOpenKey([...openKey])
      setOpenKey([])
    }else{
      setOpenKey([...cacheOpenKey])
    }
  },[collapsed])
  let router = getRoutes()
  // console.log(router[0].routes);//想用约定式路由自动生成菜单，有错误，未完成，只能写死了！
  let routes = router[0].routes
  // console.log(routes);
    const items: MenuItem[] = [
        getItem('商品管理', '/ProductManagement', <MyIcon type="icon-shangpinguanli" />, [
          getItem('产品类目', '/ProductManagement/category',<MyIcon type="icon-leibieguanli" />),
          getItem('产品列表', '/ProductManagement/productlist',<MyIcon type="icon-goodsppecategory" />),
        ]),
        getItem('图片管理', '/PictureManagement', <MyIcon type="icon-tupian" />, [
            getItem('轮播图管理', '/PictureManagement/carouseImanagement',<MyIcon type="icon-lunbotuguanli" />),
        ]),
      
        getItem('交易管理', '/TransactionManagement', <MyIcon type="icon-jiaoyiguanli2" />, [
            getItem('交易金额', '/TransactionManagement/Amount',<MyIcon type="icon-jine" />),
            getItem('订单金额', '/TransactionManagement/Order',<MyIcon type="icon-dingdanguanli" />),
            getItem('退款管理', '/TransactionManagement/Refound',<MyIcon type="icon-tuikuanguanli1" />),
        ]),
        getItem('支付管理', '/PayManagement', <MyIcon type="icon-zhifuguanli" />, [
            getItem('支付类型', '/PayManagement/PayType',<MyIcon type="icon-zhifuleixing" />),
        ]),
      ];
       // 菜单的点击事件
    let handleClick = (item:any)=>{
      // console.log(item);
      let path = item .key
      // console.log(path);
      history.push(path)
  }
    return(
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo" />
        <Menu
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline"
            theme="dark"
            items={items}
            onClick={handleClick}
        />
      </Sider>
    )
}
export default SiderBase